<template>
  <div class='container'>
    <el-card style="margin-top: 10px;">
      <!-- 头部 -->
      <div class="header">
        <span class="constructor">说明：目前支持学科和关键字条件筛选</span>
        <el-button icon="el-icon-edit" type="success" @click="$router.push('/questions/new')">新增试题</el-button>
      </div>

      <!-- 表单 -->
      <el-form label-width="90px" class="formInfo" :model="formData">
        <!-- 学科信息 -->
        <el-row class="suject-info">
          <!-- 学科 -->
          <el-col :span="6">
            <el-form-item label="学科" size="small">
              <el-select v-model="formData.subjectID" placeholder="请选择" @change="subjectChange">
                <el-option v-for="item in subjectList" :key="item.id" :label="item.subjectName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        <!-- 二级目录 -->
          <el-col :span="6">
            <el-form-item label="二级目录" size="small">
              <el-select v-model="formData.catalogID" placeholder="请选择">
                <el-option v-for="item in subs" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 标签 -->
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="formData.tags" placeholder="请选择">
                <el-option v-for="item in tags" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 关键字 -->
          <el-col :span="6">
            <el-form-item label="关键字" size="small">
             <el-input v-model="formData.keyword" placeholder="根据题干搜索" />
            </el-form-item>
          </el-col>
        </el-row>

      <!-- 类型信息 -->
       <el-row class="type-info">
          <!-- 试题类型 -->
          <el-col :span="6">
            <el-form-item label="试题类型" size="small">
              <el-select v-model="formData.questionType" placeholder="请选择">
                <el-option v-for="(item, index) in quesTypes" :key="item" :label="item" :value="index + 1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度" size="small">
              <el-select v-model="formData.difficulty" placeholder="请选择">
                <el-option v-for="(item, index) in difficulties" :key="item" :label="item" :value="index + 1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 方向 -->
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="formData.direction" placeholder="请选择">
                <el-option v-for="item in directories" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="formData.creatorID" placeholder="请选择">
                <el-option v-for="item in directoryList" :key="item.id" :label="item.username" :value="item.creatorID"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
       </el-row>

        <!-- 备注信息 -->
       <el-row class="remark-info">
          <!-- 题目备注 -->
          <el-col :span="6">
            <el-form-item label="题目备注" size="small">
             <el-input v-model="formData.remarks" placeholder="题目备注" />
            </el-form-item>
          </el-col>
          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item label="企业简称" size="small">
             <el-input v-model="formData.shortName" placeholder="企业简称" />
            </el-form-item>
          </el-col>
          <!-- 城市 -->
          <el-col :span="6">
            <el-form-item label="城市">
              <el-row>
                <el-col :span="12">
                  <el-select v-model="formData.province" placeholder="请选择" size="small" style="margin-right:2px" @change="provinceChange">
                    <el-option v-for="item in provinces" :key="item" :label="item" :value="item" />
                  </el-select>
                </el-col>
                <el-col :span="12">
                  <el-select v-model="formData.city" placeholder="请选择" size="small" style="margin-left:2px">
                    <el-option v-for="item in cities" :key="item" :label="item" :value="item" />
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <!-- 操作 -->
          <el-col :span="6" class="opration">
            <el-button size="small" @click="clear">清除</el-button>
            <el-button type="primary" size="small" @click="search">搜索</el-button>
          </el-col>
       </el-row>
      </el-form>

      <!-- 提示 -->
      <el-alert
        :title="alertTitle"
        type="info"
        :closable="false"
        show-icon>
      </el-alert>

      <!-- 表格 -->
      <el-table :data="tableList" class="table" v-loading="loading">
        <el-table-column property="number" label="试题编号" width="100" />
        <el-table-column property="subject" label="学科" width="100" />
        <el-table-column property="catalog" label="目录" width="100" />
        <el-table-column property="questionType" label="题型" width="100" :formatter="formateQuestionType"/>
        <el-table-column property="question" label="题干" width="250" >
          <template #default='{ row }'>
            <p v-html="row.question"></p>
          </template>
        </el-table-column>

        <el-table-column property="addDate" label="录入时间" width="150" :formatter="formateTime" />
        <el-table-column property="difficulty" label="难度" width="100" :formatter="formateDifficulty" />
        <el-table-column property="creator" label="录入人" width="100" />

        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button type="primary" size="small" icon="el-icon-view" title="预览" class="circle view" @click="priview(row)"></el-button>
            <el-button type="primary" size="small" icon="el-icon-edit" title="修改" class="circle edit" @click="$router.push(`/questions/new?id=${row.id}`)"></el-button>
            <el-button type="primary" size="small" icon="el-icon-delete" title="删除" class="circle delete" @click="delQues(row)"></el-button>
            <el-button type="primary" size="small" icon="el-icon-circle-check" title="加入精选" class="circle check" @click="addChoice(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加分页器 -->
      <el-pagination
        background
        :current-page="page"
        :page-sizes="[2, 3, 4, 5]"
        :page-size="pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 添加预览弹框 -->
    <QuestionsPreview :id="quesId" :showDialog.sync="showDialog"/>

  </div>
</template>

<script>
import { list as questionList, remove, choiceAdd } from '@/api/hmmm/questions'
import { provinces, citys } from '@/api/hmmm/citys'
import { list as subjctList } from '@/api/hmmm/subjects.js'
import { simple } from '@/api/hmmm/tags.js'
import { list as directoryList, simple as directorySimple } from '@/api/hmmm/directorys.js'
import QuestionsPreview from '@/module-hmmm/components/questions-preview.vue'
import dayjs from 'dayjs'
export default {

  components: {
    QuestionsPreview
  },
  data () {
    return {
      formData: {
        page: 1,
        pagesize: 5,
        // 学科
        subjectID: '',
        // 难度
        difficulty: '',
        // 试题类型
        questionType: '',
        // 标签名称
        tags: '',
        // 企业所在地省份
        province: '',
        // 企业所在城市
        city: '',
        // 关键字
        keyword: '',
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 方向
        direction: '',
        // 录入人
        creatorID: '',
        // 目录
        catalogID: ''
      },
      // 表格信息列表
      tableList: [],
      // 学科信息列表
      subjectList: [],

      // 总数
      counts: 1,
      // 当前页
      page: 1,
      // 每页显示条目数
      pagesize: 5,
      // 二级目录
      subs: [],
      // 标签
      tags: [],
      // 目录列表
      directoryList: [],

      // 试题类型
      quesTypes: ['单选', '多选', '简单'],

      // 试题难度
      difficulties: ['简单', '一般', '困难'],
      // 方向
      directories: ['o2o', '外包服务', '企业服务', '互联网金融', '企业咨询', '互联网', '电子商务', '其他'],

      // 所有省市
      provinces: [],
      cities: [],

      loading: false,

      showDialog: false,
      quesId: 0
    }
  },

  created () {
    this.getQuestionList()
    this.getSubjectList()
    this.getDirectoryList()
    this.getProvince()
  },

  computed: {
    alertTitle () {
      return `数据一共${this.counts}条`
    }
  },

  methods: {
    // 搜索
    async search () {
      this.loading = true

      // 过滤参数
      const data = {}
      for (const key in this.formData) {
        if (this.formData[key].toString().length) {
          data[key] = this.formData[key]
        }
      }
      const { data: { counts, items } } = await questionList(data)
      this.counts = counts
      this.tableList = items

      this.loading = false
    },

    // 预览
    priview (row) {
      this.quesId = row.id
      this.showDialog = true
    },

    // 删题
    async delQues (row) {
      this.$confirm('此操作将永久删除该题目,是否继续?', '提示', { type: 'warning' }).then(async () => {
        await remove({ id: row.id })
        this.$message.success('删除成功')
        this.page = 1
        this.getQuestionList()
      })
    },
    // 加入精选
    addChoice (row) {
      this.$confirm('此操作将该题目加入精选,是否继续?', '提示', { type: 'info' }).then(async () => {
        await choiceAdd({ id: row.id, choiceState: 1 })
        this.$message.success('添加成功')
        this.page = 1
        this.getQuestionList()
      })
    },

    // 清空
    clear () {
      this.formData = {
        page: 1,
        pagesize: 5,
        // 学科
        subjectID: '',
        // 难度
        difficulty: '',
        // 试题类型
        questionType: '',
        // 标签名称
        tags: '',
        // 企业所在地省份
        province: '',
        // 企业所在城市
        city: '',
        // 关键字
        keyword: '',
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 方向
        direction: '',
        // 录入人
        creatorID: '',
        // 目录
        catalogID: ''
      }
    },

    handleSizeChange (val) { // 每一页的显示条数改变
      this.pagesize = val
      this.page = 1 // 显示第一页的数据（没页的显示条数改变时需要重置页面）
      this.getQuestionList()
    },

    handleCurrentChange (val) {
      this.page = val // 没有双向绑定 所以试图改变不会影响currentPage
      this.getQuestionList()
    },

    async subjectChange (id) {
      const { data: subs } = await directorySimple({ subjectID: id })
      const { data: tags } = await simple({ subjectID: id })

      this.subs = subs.length ? subs : []
      this.tags = tags.length ? tags : []
    },

    formateDifficulty ({ difficulty }) {
      return this.difficulties.find((item, index) => index === +difficulty)
    },

    formateQuestionType ({ questionType }) {
      return this.quesTypes.find((item, index) => index === +questionType)
    },

    formateTime ({ addDate }) {
      return dayjs(addDate).format('YYYY/MM/DD')
    },
    // 获取所有身份
    getProvince () {
      this.provinces = provinces()
    },
    provinceChange (province) {
      this.cities = citys(province)
    },

    async getQuestionList () {
      const { data: { counts, items } } = await questionList({
        page: this.page,
        pagesize: this.pagesize
      })
      this.counts = counts
      this.tableList = items
    },

    async getSubjectList () {
      const { data: { items } } = await subjctList({
        page: 1,
        pagesize: 50
      })
      this.subjectList = items
    },

    async getDirectoryList () {
      const { data: { items } } = await directoryList({
        page: 1,
        pagesize: 50
      })
      this.directoryList = items
    }
  }
}
</script>

<style scoped lang='scss'>
.header {
  display: flex;
  justify-content: space-between;
  .constructor {
    color: pink;
    font-size: 12px;
  }
}
.formInfo {
  margin-top: 20px;

  .opration {
    text-align: right;
  }
}
.table {
  margin-top: 20px;
}
.table .circle {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  line-height: 1px;
  background: #fff;
  color: #606266;

  font-size: 14px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  text-align: center;
  padding-right: 9px;
  padding-left: 9px;
  transition: .1s;
  // white-space: nowrap;
  // vertical-align: middle;
  // outline: 0;

  &.view {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
    &:hover {
      background-color: #409eff;
      color: white;
    }
  }

  &.edit {
    color: #67c23a;
    background: #f0f9eb;
    border-color: #c2e7b0;
    &:hover {
      background-color: #67c23a;
      color: white;
    }
  }

  &.delete {
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
    &:hover {
      background-color: #f56c6c;
      color: white;
    }
  }

  &.check {
    color: #e6a23c;
    background: #fdf6ec;
    border-color: #f5dab1;
    &:hover {
      background-color: #e6a23c;
      color: white;
    }
  }
}
</style>
